<template>
    <div class="team-container">
      <h2>👥 团队分工</h2>
      <div class="member-grid">
        <div 
          v-for="(member, index) in members"
          :key="index"
          class="member-card"
        >
          <h3>{{ member.name }}</h3>
          <p class="student-id">{{ member.id }}</p>
          <p class="task">{{ member.task }}</p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue'
  
  const members = reactive([
    { name: '张三', id: '20230001', task: '前端架构设计' },
    { name: '李四', id: '20230002', task: '后端API开发' },
    { name: '王五', id: '20230003', task: '数据库设计' },
    { name: '赵六', id: '20230004', task: '测试与部署' }
  ])
  </script>
  
  <style scoped>
  .team-container {
    margin-top: 30px;
  }
  
  h2 {
    color: #34495e;
    margin-bottom: 20px;
  }
  
  .member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .member-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
  }
  
  .member-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  
  .student-id {
    color: #7f8c8d;
    font-size: 0.9em;
  }
  
  .task {
    color: #2ecc71;
    font-weight: bold;
    margin-top: 10px;
  }
  </style>